<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:sigecComp="http://java.sun.com/jsf/composite/components">

	<h:outputStylesheet library="css" name="textos.css" />    
   	<h:outputStylesheet library="css" name="bordes.css"/>
   	<h:outputStylesheet library="css" name="botones.css"/>
   	<h:outputScript library="js" name="validaciones.js" target="head"/>
   	
   	<h:outputScript library="js" name="jquery.effects.core.js" />
	<h:outputScript library="js" name="jquery.effects.blind.js" />
    <h:outputStylesheet library="css" name="componentsCss.css" />
    <h:outputScript  library="js" name="componentsJs.js" />
   	<h:outputStylesheet library="css" name="tables.css" />
   	
	<h:form>
		
		<rich:panel header="#{msg.etiqueta_datos_principales}" id="pnlDocente">
			<h:panelGroup layout="block" styleClass="roundCorner">
				<h:panelGrid columns="1" style="padding-left:10px; text-align:center;">
					<a4j:commandButton value="#{msg['guardar']}" actionListener="#{creacionUsuarioController.btnCrearUsuario}" image="/resources/images/save.png" render="pnlDocente"/>
					<h:outputLabel value="#{msg['guardar']}" />
				</h:panelGrid>
			</h:panelGroup>
			
			<rich:collapsiblePanel header="#{msg['usuario']}"  headerClass="headerDivCollap" styleClass="mainDivCollap" 
				leftCollapsedIcon="triangleDown" leftExpandedIcon="triangleUp" switchType="client">
				
				<h:panelGrid columns="2">
					<h:outputLabel value="#{msg['identificador']} :"  style="float:left; width:150px;" />
					<sigecComp:textField value="#{creacionUsuarioController.usuarioPerfil.usuario.identificador}" required="true" editMode="true" label="#{msg['identificador']}" />
					
					<h:outputLabel value="#{msg['clave']} :"  style="float:left; width:150px;" />
					<h:inputSecret value="#{creacionUsuarioController.usuarioPerfil.usuario.clave}" required="true" requiredMessage="El campo clave es requerido"/>
				</h:panelGrid>
			</rich:collapsiblePanel>
			
			<rich:collapsiblePanel header="#{msg['datos_personales']}"  headerClass="headerDivCollap" styleClass="mainDivCollap" 
				leftCollapsedIcon="triangleDown" leftExpandedIcon="triangleUp" switchType="client">
			
				<h:panelGrid columns="2" columnClasses=",colRemoveSpace">
					<h:outputLabel value="#{msg['cedula']} :"  style="width:150px; display:block;" />
					<sigecComp:textField value="#{creacionUsuarioController.usuarioPerfil.persona.cedula}" required="true" editMode="true" label="El campo #{msg['cedula']} es obligatorio" onkeypressScript="return validateNumPP(event);">
						<f:validator for="Input" validatorId="cedulaValidator"></f:validator>
					</sigecComp:textField>
					
					<h:outputLabel value="#{msg['nombres']} :" />
					<h:panelGrid columns="2" styleClass="removeSpacesTable" columnClasses="colRemoveSpace">
						<sigecComp:textField value="#{creacionUsuarioController.usuarioPerfil.persona.primerNombre}" required="true" editMode="true" label="#{msg['nombre']}" />
						<h:inputText value="#{creacionUsuarioController.usuarioPerfil.persona.segundoNombre}"/>
					</h:panelGrid>	
						
					


					<h:outputLabel value="#{msg['apellidos']} :" />
					<h:panelGrid columns="2" styleClass="removeSpacesTable" columnClasses="colRemoveSpace">
						<sigecComp:textField value="#{creacionUsuarioController.usuarioPerfil.persona.primerApellido}" required="true" editMode="true" label="#{msg['apellidos']}" />
						<h:inputText value="#{creacionUsuarioController.usuarioPerfil.persona.segundoApellido}" />
					</h:panelGrid>

					<h:outputLabel value="#{msg['fecha_nacimiento']} :" />
					<rich:calendar value="#{creacionUsuarioController.usuarioPerfil.persona.fechaNacimiento}" datePattern="#{msg['dd_MMM_yyyy']}">
					</rich:calendar>

					<h:outputLabel value="#{msg['nacionalidad']} :" />
					<h:inputText value="#{creacionUsuarioController.usuarioPerfil.persona.nacionalidad}" size="43"/>

					<h:outputLabel value="#{msg['direccion']} :" />
					<h:inputText value="#{creacionUsuarioController.usuarioPerfil.persona.direccion}" size="43"/>

					<h:outputLabel value="#{msg['e_mail']} :" />
					<h:inputText value="#{creacionUsuarioController.usuarioPerfil.persona.mail}" size="43"/>

					<h:outputLabel value="#{msg['celular']} :" />
					<h:inputText value="#{creacionUsuarioController.usuarioPerfil.persona.telefonoCelular}" maxlength="15" onkeypress="return validateNumPP(event);"/>
				</h:panelGrid>
			</rich:collapsiblePanel>
			
			<rich:collapsiblePanel header="#{msg.etiqueta_perfil}"  headerClass="headerDivCollap" styleClass="mainDivCollap" 
				leftCollapsedIcon="triangleDown" leftExpandedIcon="triangleUp" switchType="client">
			
					
				
				
				<rich:dataTable value="#{creacionUsuarioController.lstPerfils}" var="perfil" style="width:100%;">
					<f:facet name="header">
						<h:outputLabel value="Seleccione un perfil" />
					</f:facet>
					<rich:column style="text-align:center;">
						<f:facet name="header">
							<h:outputLabel value="Seleccionar" />
						</f:facet>
						<h:selectBooleanCheckbox value="#{perfil.selected}" />
					</rich:column>
					
					<rich:column>
						<f:facet name="header">
							<h:outputLabel value="Nombre del perfil" />
						</f:facet>
						<h:outputText value="#{perfil.nombre}" />
					</rich:column>
					
					<rich:column>
						<f:facet name="header">
							<h:outputLabel value="#{msg.descripcion}" />
						</f:facet>
						<h:outputText value="#{perfil.descripcion}" />
					</rich:column>
				</rich:dataTable>
			</rich:collapsiblePanel>
		</rich:panel>
	</h:form>
</ui:composition>
